import React from "react";
import "./Components.css";

const CREDITCARD = "信用卡";
const BTC = "比特币";

const Choice = ({ active, onClick, label }) => {
    const cssClasses = ["choice"];

    if (active) {
        // <-- check props, not state
        cssClasses.push("active");
    }

    return (
        <div className={cssClasses.join(" ")} onClick={onClick}>
            {label} {/* <-- allow any label */}
        </div>
    );
};

class SwitchChoice extends React.Component {
    state = {
        payMethod: BTC
    };

    select = choice => {
        return evt => {
            this.setState({
                payMethod: choice
            });
        };
    };

    render() {
        return (
            <div className="switch">
                <Choice
                    onClick={this.select(CREDITCARD)}
                    active={this.state.payMethod === CREDITCARD}
                    label="信用卡支付"
                />
                <Choice
                    onClick={this.select(BTC)}
                    active={this.state.payMethod === BTC}
                    label="比特币支付"
                />
                支付方式: {this.state.payMethod}
            </div>
        );
    }
}

export default SwitchChoice;
